<script setup>
import { ref } from "vue";
import gsap from "gsap";

const list = ref([
  { msg: "Bruce Lee" },
  { msg: "Jackie Chan" },
  { msg: "Chuck Norris" },
  { msg: "Jet Li" },
  { msg: "Kung Fury" },
]);
const query = ref("");

function handleClick() {
  list.value.unshift({
    msg: query.value,
  });
  query.value = "";
}

function handleDele(index) {
  list.value.splice(index, 1);
}
function onBeforeEnter(el) {
  gsap.set(el, {
    opacity: 0,
  });
}
function onEnter(el, done) {
  console.log(el, el.dataset.index, 45623000);
  gsap.to(el, {
    duration: 0.6,
    opacity: 1,
    delay: el.dataset.index * 0.3,
    onComplete: done,
  });
}
</script>

<template>
  <input v-model="query" />
  <button @click="handleClick">添加</button>
  <br />
  <TransitionGroup
    tag="ul"
    class="container"
    name="todo"
    appear
    @before-enter="onBeforeEnter"
    @enter="onEnter"
  >
    <li v-for="(item, index) in list" :key="item.msg" :data-index="index">
      <span>{{ item.msg }}-</span>
      <button @click="handleDele(index)">删除</button>
    </li>
  </TransitionGroup>
</template>
<style scoped>
.container {
  position: relative;
}
.todo-leave-to {
  opacity: 0;
  transform: scale(0);
}

.todo-move,
.todo-leave-active {
  transition: all 1s ease;
}
.todo-leave-active {
  position: absolute;
}
</style>
